.index-layout {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  margin: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background-color: #fff;

  .index-layout__container {
    flex: 1;
    height: 100%;
    padding: 20px;

    .el-scrollbar__view {
      height: 100%;

      .y-table {
        height: 100%;
      }
    }
  }
}

.view-layout {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  margin: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background-color: #fff;

  > div {
    padding-bottom: 20px;
    &:last-child {
      padding-bottom: 0px;
    }
  }

  .view-layout__container {
    flex: 1;
    height: 100%;

    .el-scrollbar__view {
      height: 100%;
    }
  }

  .view-layout__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    .view-layout__footer_right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}

.y-table {
  // display: flex;
  // flex-direction: column;
  .y-table__header {
    &:not(:empty) {
      padding: 10px;
    }
  }
  .y-table-edit-operas {
  }
  .y-table__container {
    // flex: 1;

    .vxe-grid {
      // height: 100%;
      // display: flex;
      // flex-direction: column;
      .y-table__toolbar {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .y-table__toolbar_left {
        }
        .y-table__toolbar_right {
        }
      }

      .vxe-editable {
      }

      .vxe-body--column.col--selected,
      .col--actived {
        box-shadow: inset 0px 0px 0px 1px var(--el-color-primary);
      }

      .row--hover {
        background-color: var(--el-color-primary-light-8);
        .y-cell-edit {
          background-color: var(--el-color-primary-light-7);
        }
      }

      .row--checked {
        background-color: var(--el-color-primary-light-8);
        .y-cell-edit {
          background-color: var(--el-color-primary-light-7);
        }
      }

      .row--hover.row--checked {
        background-color: var(--el-color-primary-light-7);
        .y-cell-edit {
          background-color: var(--el-color-primary-light-6);
        }
      }

      .y-cell-edit {
        background-color: var(--el-color-primary-light-9);

        .vxe-cell {
          padding: 1px;
          height: 100%;

          .el-input,
          .el-select,
          .select-trigger {
            height: 100%;
            .el-input__wrapper {
              border-radius: 0px;
            }
          }

          .el-date-editor .el-input__prefix {
            display: none;
          }
        }
      }

      .row--hover,
      .y-cell-edit,
      .row--checked {
        transition: 0.2s background-color;
      }

      .vxe-grid--bottom-wrapper {
      }
    }
  }

  .y-table__footer {
    padding: 10px;

    display: flex;
    justify-content: space-between;
  }
}

.user-select-none {
  user-select: none;
}

.y-table-filters {
  .y-table-filters__common {
    display: flex;

    .el-select {
      width: 110px;
      padding-right: 10px;
    }

    .el-input {
      flex: 1;
    }
  }
}
